<template>
	<Row type="flex"
	     class="node-business_case">
		<Col :span="listCol"
		     class="list-panel">
		<Button :type="historyMode?'primary':'ghost'"
		        size="small"
		        class="buttom-history"
		        @click="historyMode=!historyMode"
		        icon="clock"></Button>
		<component :is="tableComp"
		           v-show="!historyMode"
		           ref="list"
		           :model="model"
		           :action-show="false"
		           size="small"
		           :singleSelect="true"
		           :rowCheckMode="true"
		           :hasCheck="false"
		           :hasInlineAction="false"
		           @rowCheck="pushData"
		           :action-modal-transfer="transferSelector"
		           :fixed-search-panel="false">
			<template slot="item"
			          slot-scope="data">
				<ListItem :data="data"
				          :mark="dataMap[data.row.id]"></ListItem>
			</template>
		</component>
		<component v-show="historyMode"
		           :module="model.code+'_history'"
		           :is="tableComp"
		           ref="history"
		           :model="model"
		           :action-show="false"
		           size="small"
		           :singleSelect="true"
		           :rowCheckMode="true"
		           :hasCheck="false"
		           :hasInlineAction="false"
		           @rowCheck="pushData"
		           :data="dataList"
		           :fixed-search-panel="false"
		           :initFetch="false"
		           :hasPage="false">
			<template slot="item"
			          slot-scope="data">
				<ListItem :data="data"
				          :hasClose="true"
				          @click="itemClose"></ListItem>
			</template>
		</component>
		</Col>
		<div class="loading-box center-container"
		     v-if="loading">
			<i class="ivu-load-loop ivu-icon ivu-icon-load-c"></i>
			数据加载中
		</div>
		<Col v-if="activeData"
		     class="content-box"
		     :span="24-listCol">
		<Col :span="viewCol"
		     class="view-panel">
		<div class="view-info">
			<Scrollbar class="view-info"
			           :vertical="true"
			           :visible="true">
				<div class="info-wrapper">
					<div class="info-box">
						<Tabs class="ivu-col"
						      v-model="infoTab">
							<TabPane label="案件信息"
							         name="case">
								<View-control :view="false"
								              :cell-max-width="90"
								              :model="model"
								              v-model="activeData"
								              @redraw="formRedraw"
								              :col="2"></View-control>
							</TabPane>
						</Tabs>
					</div>
					<div class="contact-box">
						<Form-control :view="false"
						              class="grid-small"
						              v-model="activeData"
						              :isXList="true"
						              ref="contactList"
						              :listSingleSelect="true"
						              :action-modal-transfer="transferSelector"
						              :model="contactModel"></Form-control>
					</div>
				</div>
				<Form-control class="slaves-box grid-small"
				              :view="false"
				              :listLeftTab="true"
				              v-model="activeData"
				              :action-modal-transfer="transferSelector"
				              :model="slaveModel"></Form-control>
			</Scrollbar>
		</div>
		<div class="view-action">
			<ActionMirror class="mirror-box"
			              @triggerAction="listActionTrigger"
			              :actions="mirrorActionList"></ActionMirror>
		</div>
		</Col>

		<Col :span="actionCol"
		     class="action-panel">
		<Tabs>
			<TabPane label="催收记录"
			         name="case">
				<Scrollbar :vertical="true"
				           :visible="true">
					<FormControl :view="false"
					             :model="model"
					             class="form-small"
					             v-model="activeData"
					             :col="1"></FormControl>
				</Scrollbar>
			</TabPane>
		</Tabs>
		<div class="action-bottom">
			<Button type="primary">提交</Button>
		</div>
		</Col>
		</Col>
		<Col v-else-if="!activeId && !loading"
		     :span="24-listCol"
		     class="center-container empty-box">
		<div class="blue">
			请先选择数据
		</div>
		</Col>
	</Row>
</template>

<script>
import $ from '@/common';
import ListItem from './item';
import ViewControl from '@/components/view.vue';
import ActionMirror from 'action/actionMirror';
import GridTable from '@/node/gridPanel/index';
import FormControl from '@/components/form';
import GridTableMin from '@/node/gridPanelMin/index';
import './style.less';
import Path from '@/common/path';

export default {
	props: {
		model: {},
		nodeCode: {},
	},
	data() {
		return {
			contactCode: 'kcs_cs_contacts',
			workCode: 'kcs_cs_work',
			listCol: 4,
			viewCol: 19,
			actionCol: 5,
			contactModel: null,
			slaveModel: null,
			historyMode: false,
			infoTab: 0,
			loading: false,
			//读取中的数据的主键，用于方式多数据重复读取造成读取状态过早关闭
			loadingId: null,
			activeId: null,
			dataMap: {},
			statusList: {},
			dataList: [],
			pathFind: null,
			bill_code: null,
		};
	},
	computed: {
		//模态窗转换位置选择器，临时方法
		//需区别对待不通过的组件实例
		transferSelector() {
			return '.content-box';
		},
		tableComp() {
			return 'GridTableMin';
		},
		activeData() {
			//this.loading; //通过设置loading使读取完毕时能重新计算数据
			return this.dataMap[this.activeId];
		},
		mirrorActionList() {
			var data = [];
			var list = this.model.actions;
			list.forEach(action => {
				if (action.locate !== 'none' && action.param && action.param.in_detail) {
					data.push(action);
				}
			});
			return data;
		},
	},
	watch: {
		dataList(v) {
			this.$refs.history.setPageData(v);
		},
	},
	methods: {
		itemClose(index) {
			console.log(index);
		},
		formRedraw() {
			//详情组件重绘，同步更新列表组件以同步宽高
			this.$refs.contactList.redraw();
		},
		pushData({ value, index, id }) {
			if (!this.dataMap[id]) {
				this.fetchDetail(id);
			} else {
				this.activeId = id;
			}
		},
		fetchDetail(id) {
			this.loadingId = id;
			this.loading = true;
			$.link(this.pathFind, null, {
				param: {
					id,
				},
			})
				.then(res => {
					var data = res.data;
					var hasData = false;

					if (this.dataMap[id]) {
						hasData = true;
					}
					this.$set(this.dataMap, id, data.data);
					//新建状态对象
					this.$set(this.statusList, id, {
						//action暂存数据
						actions: {},
						//当前激活的action
						activeAction: null,
						//状态码，备用属性
						status: 1,
					});
					if (!hasData) {
						this.dataList.unshift(this.dataMap[id]);
					}
					if (this.loadingId === id) {
						this.activeId = id;
					}
				})
				.finally(() => {
					if (this.loadingId === id) {
						this.loading = false;
					}
				});
		},
		listActionTrigger(action, data) {
			if (!this.actionData && this.activeData) {
				this.$set(this.$parent, 'actionData', this.activeData);
			}
			/*
			var storage =
				this.listData[this.activeIndex].actions && this.listData[this.activeIndex].actions[action.code];
			if (storage) {
				storage = {
					...storage,
					_index: this.activeIndex,
				};
			}
			*/
			this.$refs.list.actionTrigger({
				code: action.code,
				row: this.activeData,
				index: this.actionDataIndex,
				data: this.activeData.id,
				option: {
					enable_storage: true,
					/*storage: storage,*/
					importData: data,
				},
			});
		},
	},
	created() {
		var slaves = [];
		var upSlaves = [];
		this.bill_code = this.model.bill_code;

		for (let action of this.model.actions) {
			//获取指定的action
			if (action.type === 'case_detail') {
				this.actionDetail = action;
				if (action.param) {
					if (action.param.bill_code) {
						this.bill_code = action.param.bill_code;
					}
					if (action.param.path_find) {
						this.pathFind = action.param.path_find;
					}
				}
			}
			if (action.code === 'collect_log_add') {
				this.actionLog = action;
			}
		}
		this.pathFind = $.composePath(this.pathFind || Path.bill_find, {
			bill_code: this.bill_code,
		});
		this.model.slaves.forEach(slave => {
			if (slave.code === this.contactCode || slave.code === this.workCode) {
				upSlaves.push(slave);
			} else {
				slaves.push(slave);
			}
		});
		this.slaveModel = {
			...this.model,
			slaves,
			fields: [],
		};
		this.contactModel = {
			...this.model,
			slaves: upSlaves,
			fields: [],
		};
	},
	components: {
		GridTable,
		GridTableMin,
		ActionMirror,
		ViewControl,
		FormControl,
		ListItem,
	},
};
</script>